<!-- Streaming Transcription Tab -->
<div id="tabAudioStreaming" class="tab-content">
    <div class="endpoint-section" id="audioStreaming">
        <h2>
            <span class="endpoint-method websocket">WS</span>
            <span class="endpoint-path">/api/v1/audio/stream/transcribe - Real-time Streaming Transcription</span>
        </h2>
        <p>Stream audio from your microphone for real-time transcription using Nemo STT models.</p>

        <!-- Setup Wizard Note (Streaming STT) -->
        <div class="info-box" style="margin-top:10px;">
            <i class="icon-info"></i>
            <span>
                Need STT backends? Open the <a href="/setup" target="_blank">Setup Wizard</a> to install/enable Parakeet/Canary (NeMo), Whisper, or Qwen2Audio.
                See: <a href="/docs-static/Getting-Started-STT_and_TTS.md" target="_blank">Getting Started — STT/TTS</a>.
            </span>
        </div>

        <!-- Connection Status -->
        <div class="status-bar" id="streamingStatus">
            <div class="status-indicator disconnected" id="streamingStatusIndicator"></div>
            <span id="streamingStatusText">Disconnected</span>
        </div>

        <!-- Configuration Section -->
        <div class="config-section">
            <h3>Configuration</h3>

            <!-- API Key Section (hidden for admin tool) -->
            <input type="hidden" id="streamingApiKey" />

            <div class="columns">
                <div class="column">
                    <div class="form-group">
                        <label for="streamingModel">Model:</label>
                        <select id="streamingModel">
                            <option value="parakeet">Parakeet (Fast)</option>
                            <option value="canary">Canary (Multilingual)</option>
                            <option value="whisper">Whisper (Accurate)</option>
                        </select>
                    </div>

                    <div class="form-group" id="variantGroup">
                        <label for="streamingVariant">Variant:</label>
                        <select id="streamingVariant">
                            <option value="standard">Standard</option>
                            <option value="onnx">ONNX (CPU Optimized)</option>
                            <option value="mlx" selected>MLX (Apple Silicon)</option>
                        </select>
                    </div>

                    <div class="form-group" id="whisperModelGroup" style="display: none;">
                        <label for="whisperModelSize">Whisper Model:</label>
                        <select id="whisperModelSize">
                            <option value="tiny">Tiny (39M, fastest)</option>
                            <option value="base">Base (74M)</option>
                            <option value="small">Small (244M)</option>
                            <option value="medium">Medium (769M)</option>
                            <option value="large-v3">Large v3 (1550M)</option>
                            <option value="distil-large-v3" selected>Distil-Large v3 (756M, best)</option>
                        </select>
                    </div>

                    <div class="form-group" id="whisperTaskGroup" style="display: none;">
                        <label for="whisperTask">Task:</label>
                        <select id="whisperTask">
                            <option value="transcribe">Transcribe</option>
                            <option value="translate">Translate to English</option>
                        </select>
                    </div>

                    <div class="form-group" id="languageGroup" style="display: none;">
                        <label for="streamingLanguage">Language:</label>
                        <select id="streamingLanguage">
                            <option value="">Auto-detect</option>
                            <option value="en">English</option>
                            <option value="es">Spanish</option>
                            <option value="de">German</option>
                            <option value="fr">French</option>
                            <option value="zh">Chinese</option>
                            <option value="ja">Japanese</option>
                            <option value="ko">Korean</option>
                            <option value="ru">Russian</option>
                            <option value="ar">Arabic</option>
                            <option value="hi">Hindi</option>
                        </select>
                    </div>
                </div>

                <div class="column">
                    <div class="form-group">
                        <label for="streamingSampleRate">Sample Rate:</label>
                        <select id="streamingSampleRate">
                            <option value="16000" selected>16000 Hz</option>
                            <option value="8000">8000 Hz</option>
                            <option value="44100">44100 Hz</option>
                            <option value="48000">48000 Hz</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="streamingChunkDuration">Chunk Duration (seconds):</label>
                        <input type="number" id="streamingChunkDuration" value="2.0" min="0.5" max="5.0" step="0.5">
                    </div>

                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="streamingEnablePartial" checked>
                            Enable Partial Results
                        </label>
                    </div>

                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="streamingEnableVAD">
                            Enable Voice Activity Detection
                        </label>
                    </div>

                    <div class="form-group" id="vadThresholdGroup" style="display: none;">
                        <label for="streamingVADThreshold">VAD Threshold:</label>
                        <input type="number" id="streamingVADThreshold" value="0.5" min="0.1" max="1.0" step="0.1">
                        <small style="color: var(--color-text-muted);">Higher = more aggressive silence filtering</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Control Buttons -->
        <div class="button-group">
            <button id="connectStreamingBtn" class="api-button" data-action="as-connect">
                Connect to Server
            </button>
            <button id="startStreamingBtn" class="api-button secondary" data-action="as-start" disabled>
                Start Recording
            </button>
            <button id="stopStreamingBtn" class="api-button danger" data-action="as-stop" disabled>
                Stop Recording
            </button>
            <button class="api-button" data-action="as-clear">
                Clear Transcript
            </button>
        </div>

        <!-- Audio Visualizer -->
        <div class="visualizer-section">
            <h3>Audio Input</h3>
            <canvas id="streamingVisualizer" width="800" height="100"></canvas>
            <div class="audio-stats">
                <span>Volume: <span id="streamingVolume">0</span>%</span>
                <span>Duration: <span id="streamingDuration">0:00</span></span>
                <span>Chunks Sent: <span id="streamingChunks">0</span></span>
                <span>Responses: <span id="streamingResponses">0</span></span>
            </div>
        </div>

        <!-- Transcript Display -->
        <div class="transcript-section">
            <h3>Transcript</h3>
            <div id="streamingTranscript" class="transcript-box">
                <div class="transcript-placeholder">Connect and start recording to see transcript...</div>
            </div>

            <!-- Partial Result Display -->
            <div id="streamingPartial" class="partial-box" style="display: none;">
                <span class="partial-indicator">Partial:</span>
                <span id="streamingPartialText"></span>
            </div>
        </div>

        <!-- Debug Information -->
        <details class="debug-section">
            <summary>Debug Information</summary>
            <div class="debug-content">
                <h4>WebSocket Messages</h4>
                <pre id="streamingDebug">No messages yet...</pre>

                <h4>Connection Details</h4>
                <pre id="streamingConnectionInfo">Not connected</pre>
            </div>
        </details>
    </div>
</div>

<style>
/* Streaming-specific styles */
.status-bar {
    display: flex;
    align-items: center;
    padding: 10px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    animation: pulse 2s infinite;
}

.status-indicator.connected {
    background-color: #4CAF50;
}

.status-indicator.connecting {
    background-color: #FFC107;
}

.status-indicator.disconnected {
    background-color: #f44336;
    animation: none;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.visualizer-section {
    margin: 20px 0;
    padding: 15px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
}

#streamingVisualizer {
    width: 100%;
    height: 100px;
    background: #000;
    border-radius: var(--radius-sm);
}

.audio-stats {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--color-text-muted);
}

.transcript-section {
    margin: 20px 0;
}

.transcript-box {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.transcript-placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

.transcript-entry {
    margin: 5px 0;
    padding: 5px;
    border-left: 3px solid transparent;
}

.transcript-entry.partial {
    color: #666;
    font-style: italic;
    border-left-color: #FFC107;
}

.transcript-entry.final {
    color: var(--color-text);
    border-left-color: #4CAF50;
}

.transcript-entry.error {
    color: #f44336;
    border-left-color: #f44336;
}

.transcript-entry.warning {
    color: #ff9800;
    border-left-color: #ff9800;
    background-color: rgba(255, 152, 0, 0.1);
}

.partial-box {
    margin-top: 10px;
    padding: 10px;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: var(--radius-sm);
    color: #856404;
}

.partial-indicator {
    font-weight: bold;
    margin-right: 10px;
}

.debug-section {
    margin-top: 20px;
    padding: 10px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
}

.debug-content {
    margin-top: 10px;
}

.debug-content pre {
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-surface);
    padding: 10px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}

.endpoint-method.websocket {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Ensure disabled buttons are clearly disabled */
button:disabled, .api-button:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
</style>

<!-- Handlers are bound in streaming-transcription.js initializer -->
